<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="a" class="b"></div>

    <input type="text" name="username">

    <script>


        // 通过id获取  document.getElementById()              元素

        // 通过class获取  document.getElementsByClassName()   数组

        // 通过标签名获取  document.getElementsByTagName()     数组

        // 通过name属性获取  document.getElementsByName()      数组  --- 在许多浏览器都不太兼容


        // ES6新增的方法
        //   通过选择器查询单个  document.querySelector()     query查询  selector选择器
        //   通过选择器查询所有  document.querySelectorAll()  数组


        var oDivs = document.getElementsByClassName('b') ;  
        console.log(oDivs) ;    // 得到的是一个伪数组 -- 类数组


        oDivs[0].innerHTML = 666 ;


        var oDivs = document.getElementsByTagName('div') ;
        console.log(oDivs);


        var oInps = document.getElementsByName('username') ;
        console.log(oInps);


        // 
        // var oDiv = document.querySelector('#a') ;
        // var oDiv = document.querySelector('.b') ;
        // var oDiv = document.querySelector('div') ;
        // console.log(oDiv) ;


        var oDivs = document.querySelectorAll('.b') ;
        console.log(oDivs);
    
 
    </script>
    
</body>
</html>